<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row v-show="showSearch" style="width: 100%; text-align: right">
				<div style="font-size: 18px; font-weight: 700">成本项超支/节约分析</div>
				<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" style="width: 100%">
					<el-form-item label="项目名称" prop="projectId">
						<el-select v-model="queryForm.projectId" placeholder="请选择项目名称" @change="getCostTypeData">
							<el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in projectData" />
						</el-select>
					</el-form-item>
					<el-form-item label="成本项" prop="costTypeId">
						<el-select v-model="queryForm.costTypeId" placeholder="请选择成本项" @change="getDataList">
							<el-option :key="index" :label="item.name" :value="item.id" v-for="(item, index) in costTypeData" />
						</el-select>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="w-full">
					<div :key="row" v-for="(item, row) in titleList" style="width: 100%; line-height: 30px; display: flex">
						<div style="width: 150px; text-align: left">
							<div>{{ item.title }}</div>
							<div v-if="item.code != 'ratio'">（{{ getCellValue(totalData[item.code]) }}万元）</div>
							<div v-else>{{ totalData && totalData[item.code] ? totalData[item.code].toFixed(2) + '%' : '-' }}</div>
						</div>
						<div style="width: calc(100% - 150px); display: -webkit-box; text-align: center">
							<div :key="index1" v-for="(item1, index1) in list" :style="getCellWidth(item1, row, totalData)">
								<div
									v-if="row < 1 || item1.costActual"
									:class="cellClassNames(row, index1)"
									style="border: 1px solid #ebeef5; text-align: center; height: 100%"
								>
									<div v-if="item.code != 'ratio' && item.code != 'costDiff'" style="color: #333333; white-space: nowrap">
										<!-- <div>{{ item1.yearMonth }}</div> -->
										<div>{{ item1.month }}月</div>
										<div>{{ item1[item.code] ? getCellValue(item1[item.code]) : '-' }}</div>
									</div>
									<div v-else-if="item.code == 'costDiff'" style="color: #333333; line-height: 60px; white-space: nowrap">
										<div>{{ getCellValue(item1[item.code]) }}</div>
									</div>
									<div v-else style="color: #333333; line-height: 60px; white-space: nowrap">
										<div>{{ item1[item.code].toFixed(2) + '%' }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="internalCostTypeAnalysis">
import { projectList, costTypeList } from '/@/api/internal/cost/intProject';
import { getCostTypeData as costTypeAnalysis } from '/@/api/internal/cost/intProjectAnalysis';

const showSearch = ref(true);

// 定义变量内容
const projectData = ref<any[]>([]); // 项目列表
const costTypeData = ref<any[]>([]); // 成本项列表

// 查询参数
const queryForm = reactive({
	searchType: 3,
	projectId: '',
	costTypeId: '',
});

const titleList = ref([
	{ title: '总控制成本（万元）', code: 'costLimit' },
	{ title: '当前成本（万元）', code: 'costActual' },
	{ title: '超支节约（万元）', code: 'costDiff' },
	{ title: '比例', code: 'ratio' },
]);
const list = ref([]);
const totalData = ref({});

const getCellWidth = (row: any, rowIndex: number, totalData1: any) => {
	if (!row) return;
	const maxCount = Math.max(totalData1?.costLimit, totalData1?.costActual);
	if (rowIndex == 0) {
		return 'width: ' + ((row.costLimit / maxCount) * 100).toFixed(2) + '%';
	} else {
		return 'width: ' + ((row.costActual / maxCount) * 100).toFixed(2) + '%';
	}
};

const getCellValue = (cellValue: number) => {
	// if (cellValue) return Math.floor(cellValue / 10000);
	if (cellValue) return (cellValue / 10000).toFixed(1);
	// else if (cellValue == 0) return cellValue;
	else return '-';
};

const cellClassNames = (rowIndex: number, columnIndex: number) => {
	let costDiff = list.value[columnIndex].costDiff;
	if (rowIndex == 0) return 'green-cell';
	else if (costDiff == null) return '';
	else {
		if (costDiff < 0) return 'purple-cell';
		else return 'orange-cell';
	}
};

// 获取项目列表数据
const getProjectData = () => {
	projectList().then((res) => {
		projectData.value = res.data;
		queryForm.projectId = projectData.value[0].id;
		getCostTypeData();
	});
};

// 获取成本项数据
const getCostTypeData = () => {
	costTypeList({ id: queryForm.projectId }).then((res) => {
		costTypeData.value = res.data.filter((item: any) => item.selected == 1);
		queryForm.costTypeId = costTypeData.value[0].id;
		getDataList();
	});
};

// 获取成本项分析数据
const getDataList = async () => {
	costTypeAnalysis(queryForm).then((res) => {
		totalData.value = res.data.totalData;
		nextTick(() => {
			const datas = res.data.dataList;
			// list.value = datas && datas.length > 12 ? datas.slice(0, 12) : datas;
			list.value = datas;
		});
	});
};

onMounted(() => {
	getProjectData();
});
</script>
<style>
.green-cell {
	background: rgba(159, 219, 29, 1); /* 设置背景色 */
}
.blue-cell {
	background: rgb(115 155 255); /* 设置背景色 rgba(22, 93, 255, 1)*/
}
.purple-cell {
	background: rgb(167 79 250); /* 设置背景色 rgba(132, 0, 255, 1)*/
}
.orange-cell {
	background: rgba(247, 186, 30, 1); /* 设置背景色 */
}
</style>
